<template>
	<view class="setting-page-box">
		<!-- #ifdef APP -->
		<u-navbar title="设置" :autoBack="true" :placeholder="true"></u-navbar>
		<!-- #endif -->
		<!-- <image :src="pageBg" class="page-bg" v-if="pageBg"></image> -->
		<view class="setting-page">
			<view class="title">基本信息</view>
			<view class="setting-box">
				<view class="setting-item" v-if="userInfo">
					<view class="label">绑定手机号</view>
					<view style="color: #9A9A9A;">{{userInfo.mobile}}</view>
				</view>
				<!-- <view class="setting-item" @click="bindWechat" v-if="userInfo">
					<view class="label">绑定微信</view>
					<view class="value">
						<view style="color: #9A9A9A;">{{userInfo.openid?'已绑定':'未绑定'}}</view>
						<u-icon name="arrow-right" v-if="!userInfo.openid"></u-icon>
					</view>
				</view> -->
				<view class="setting-item" @click="$Tips('/pages/blacklist/blacklist')">
					<view class="label">黑名单</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="setting-item">
					<view class="label">账号注销<span style="font-size: 24rpx;color: #FF3E3E;">（注销后所有特权全部消失）</span></view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="title">通知</view>
			<view class="setting-box">
				<view class="setting-item">
					<view class="label">顶部消息通知</view>
					<u-switch v-model="messageOpen" active-color="#f169f6"></u-switch>
				</view>
				<view class="setting-item">
					<view class="label">更多设置</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
			</view>
			<view class="title">关于我们</view>
			<view class="setting-box">
				<view class="setting-item" @click="$Tips('/pages/feedback/feedback')">
					<view class="label">意见与反馈</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="setting-item">
					<view class="label">关于我们</view>
					<u-icon name="arrow-right"></u-icon>
				</view>
				<view class="setting-item">
					<view class="label">当前版本</view>
					<view style="color: #9A9A9A;">1.2.21</view>
				</view>
			</view>
			<view class="button-group">
				<view class="button1" @click="$u.throttle(logout,2000)">退出登录</view>
			</view>
		</view>
		<view style="height: 20rpx;"></view>
	</view>
</template>

<script>
	import {
		mapGetters
	} from "vuex";
	import {
		HTTP_REDIRECT_URL,
	} from '@/config/app';
	import WebSocketClass from '@/utils/websocket.js';
	const app = getApp();
	export default {
		data() {
			return {
				// pageBg: '',
				userInfo: null,
				messageOpen: false,
			}
		},
		onShow() {
			this.getUserInfo()
		},
		methods: {
			getUserInfo() {
				this.$Api['user'].getUserInfo().then(res => {
					this.userInfo = res.data
					this.userInfo.mobile = res.data.mobile.slice(0, 3) + '****' + res.data.mobile.slice(-4);
				})
			},
			bindWechat() {
				if (!this.userInfo.openid) {
					let redirect_uri = encodeURIComponent(HTTP_REDIRECT_URL);
					let oauthUrl = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx6bd80db273bdbad9" +
						`&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_base&state=1`;
					window.location = oauthUrl;
				} else {
					this.$Toast('已经绑定过微信')
				}
			},
			logout() {
				if (app.globalData.socketObj && app.globalData.socketObj.isConnect) {
					app.globalData.socketObj.closeSocket()
					app.globalData.socketObj = null
				}
				uni.removeStorageSync('searchData')
				this.$store.commit('LOGOUT')
				this.$Tips({
					title: '退出成功'
				}, {
					tab: 3,
					url: 1
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.setting-page-box {
		width: 100%;
		min-height: 100vh;
		position: relative;
		background: #F5F5F5;

		.page-bg {
			position: absolute;
			top: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
		}

		.setting-page {
			margin: 20rpx 34rpx;
			padding: 5rpx 34rpx 40rpx;
			box-shadow: 0rpx 4rpx 32rpx 0rpx #FFF0FD;
			border-radius: 32rpx;
			background: linear-gradient(180deg, #FFDAF5 0%, #FFFFFF 5%);

			.title {
				font-size: 28rpx;
				color: #323334;
				padding: 38rpx 0 20rpx;
			}

			.setting-box {
				position: relative;
				background: #F7F7F7;
				border-radius: 24rpx;

				.setting-item {
					height: 92rpx;
					padding: 0 36rpx 0 24rpx;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 28rpx;
					.value{
						display: flex;
						align-items: center;
					}
				}
			}

			.button-group {

				.button1 {
					margin: 98rpx auto 140rpx;
					width: 600rpx;
					height: 88rpx;
					font-weight: bold;
					font-size: 30rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 88rpx;
					background: linear-gradient(135deg, #FE93BF 0%, #A27AFF 100%);
					border-radius: 42rpx;
				}
			}

		}
	}
</style>